<!--
 * @Author: hhh
 * @Date: 2024-01-15 22:04:01
 * @LastEditTime: 2024-01-16 15:02:15
 * @LastEditors: hhh
 * @Description:
 * @FilePath: \cty_admin\src\views\deviceManage\deviceGroup\index.vue
-->
<template>
  <div class="main-page">
    <PageSearch :search-form-config="searchFormConfig" :form-data.sync="formData" @searchBtnClick="handleSearch" />
    <el-row type="flex" justify="end">
      <el-button type="primary" icon="el-icon-plus" size="medium" @click="handleCreateGroup">
        新建分组
      </el-button>
    </el-row>
    <PageContent ref="pageContent" :form-data="formData" :content-table-config="contentConfig">
      <template #operate="{ row }">
        <el-button type="text" size="small" icon="el-icon-edit" @click="editGroup(row)">
          编辑
        </el-button>
        <el-button type="text" size="small" icon="el-icon-delete" @click="deleteGroup(row)">
          删除
        </el-button>
      </template>
    </PageContent>

    <el-dialog :title="dialogTitle" :visible.sync="showCreateInfo" width="50%">
      <el-form :model="dialogFormData">
        <el-form-item label="分组名称">
          <el-input v-model="dialogFormData.name" style="width: 300px;" placeholder="请输入分组名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="create">
            {{ dialogTitle }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

// import dialogMixin from "@/mixins/dialogMixin";
import { contentConfig } from "./config/content.config";
import { searchFormConfig } from "./config/search.config";
// import { menus } from "@/config/enum";
import request from "@/utils/request";
export default {
  name: "DeviceGroup",
  // mixins: [dialogMixin],
  data() {
    return {
      formData: {},
      // menus,
      contentConfig,
      searchFormConfig,
      showCreateInfo: false,
      dialogFormData: {},
      dialogTitle: '',
    }
  },
  mounted(){
    // this.handleSearch();
  },
  methods: {
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    handleCreateGroup() {
      this.showCreateInfo = true;
      this.dialogTitle = "新建分组"
    },
    create() {
      let that = this;
      const { id, name } = this.dialogFormData
      request({
        url: `/device/group/edit`,
        method: "post",
        data: { id: id, name: name },
      }).then((res) => {
        if (res.code === 200) {
          that.$message.success(`${that.dialogTitle}成功`);
          that.dialogFormData = {}
          that.showCreateInfo = false;
          that.handleSearch();
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    editGroup(row) {
      console.log(row)
      this.showCreateInfo = true;
      this.dialogFormData = row;
      this.dialogTitle = "编辑分组"
    },
    deleteGroup(row) {
      let that = this;
      this.$confirm(`是否确认删除${row.name}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: `/device/group/removeGroup/${row.id}`,
          method: "post",
        }).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            that.handleSearch();
          }
        }).catch((err) => {
          console.log(err);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>
</style>
